<template>
  <view class="page">
    <Nav
      title="水源信息"
      color="linear-gradient(180deg,#00a3ff 0%,#00beff 16%,#00cafe 33%, #68dcfe 53%,#ffffff 100%)"
    ></Nav>
    <view class="main">
      <view class="main-area">
        <view class="input">
          <view class="input-title">水源名称</view>
          <input class="input-put" placeholder="输入" />
        </view>
        <view class="lon-and-lat">
          <view class="lon-and-lat-input">
            <view class="input-title">经度</view>
            <input class="input-put" placeholder="" />
          </view>
          -
          <view class="lon-and-lat-input">
            <view class="input-title">纬度</view>
            <input class="input-put" placeholder="" />
          </view>
          <button class="location">
            <image
              class="location-icon"
              :src="require('@/static/img/location-icon.png')"
            ></image
            >GPS定位
          </button>
        </view>
        <view class="input">
          <view class="input-title">面积信息</view>
          <input class="input-put" placeholder="输入(单位m²）" />
        </view>
        <view class="input">
          <view class="input-title">水源地址</view>
          <input class="input-put" placeholder="输入" />
        </view>
      </view>
      <view class="main-area2">
        <view class="main-area2-title">水源信息</view>
        <view class="main-area2-content">
          <textarea
            class="main-area2-textarea"
            maxlength="{200}"
            placeholder="输入"
          ></textarea>

          <view class="main-area2-bottom">
            <uUpload v-model="fileList1" width="123rpx" height="123rpx">
              <view class="main-area2-update">
                <view class="main-area2-updatePic">
                  <image
                    class="main-area2-icon"
                    :src="require('@/static/img/plus-icon.png')"
                  ></image>
                  上传照片
                </view>
              </view>
            </uUpload>

            <view class="main-area2-textLength">（0/300）</view>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <button class="btn" @click="onSubmit">
          <text class="btn-text" style="color: #fff"> 提交 </text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import Nav from "@/components/nav.vue";
import uUpload from "@/components/upload.vue";
export default {
  components: {
    Nav,
    uUpload,
  },
  data() {
    return { fileList1: [] };
  },
  onLoad() {},
  methods: {
    onSubmit() {
      console.log(this.fileList1);
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 150rpx;
}

.main-area {
  margin-bottom: 18rpx;
  background: #fff;
  padding: 0 30rpx;
}
.input,
.lon-and-lat-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 25rpx;
  border-radius: 18rpx;
  border: 1px solid #e9e9e9;
  margin-bottom: 18rpx;
  &-title {
    font-size: 26rpx;
    font-weight: bold;
    color: #202020;
    margin-right: 30rpx;
  }
  &-put {
    flex: 1;
    font-size: 26rpx;
    color: #202020;
  }
}
.lon-and-lat {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18rpx;

  &-input {
    width: 210rpx;
    margin-bottom: 0;
  }
}
.location {
  width: 191rpx;
  height: 88rpx;
  background: #00beff;
  border-radius: 18rpx;
  align-items: center;
  font-size: 26rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  font-weight: bold;
  color: #ffffff;
  &-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    // margin-bottom: 10rpx;
  }
}
.main-area2 {
  padding: 44rpx 30rpx;
  background: #ffffff;
  &-title {
    font-size: 26rpx;
    font-weight: bold;
    color: #202020;
    margin-bottom: 23rpx;
  }
  &-content {
    width: 100%;
    // height: 500px;
    border: 2rpx solid #e9e9e9;
    border-radius: 18rpx;
    padding: 26rpx;
  }
  &-textarea {
    width: 100%;
    font-size: 26rpx;
    height: 200rpx;
    margin-bottom: 100rpx;
  }
  &-update {
    width: 123rpx;
    height: 123rpx;
    border-radius: 18rpx;
    background: #e9e9e9;
  }
  &-updatePic {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18rpx;
    color: #00beff;
    margin-right: 30rpx;
  }
  &-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  &-icon {
    width: 50rpx;
    height: 50rpx;
  }
  &-textLength {
    font-size: 18rpx;
    color: #8d8d8d;
  }
}
.btn-box {
  width: 100%;
  position: fixed;
  bottom: 50rpx;
}
.btn {
  width: 697rpx;
  background: #00beff;
  border-radius: 54rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
